.page-product {
    padding-top: 10px;
    font-size: 14px;
    .m-crumbs{
        margin: 10px 0;
        .el-breadcrumb {
            font-size: 12px;
          }
    }
}

.m-product-categroy{
    padding: 15px 20px 0;
    background: #FFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.classic{
    display: flex;
    >dt{
        width: 80px;
        &:nth-child(2) {
            border-radius: 100px;
            background: #13D1BE;
            color: #FFF;
            height: 22px;
            line-height: 22px;
            width: 40px;
            box-sizing: border-box;
            margin-right: 40px;
            text-align: center;
        }
    }
    &:nth-child(1) {
        dd {
          border-bottom: 1px solid #ddd;
        }
    }
}
.m-product-select{
    padding-bottom: 5px;
    min-width: 120px;
    .tab{
        position: relative;
        dt{
            font-size: 14px;
            line-height: 24px;
            &.select-title {
              color: #ccc;
            }
        }
        dd{
            &:before{
                content: '';
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent transparent #e5e5e5;
                border-style: solid;
                border-width: 5px;
                top: -11px;
            }
            &:after{
                content: ' ';
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent transparent #fff;
                border-style: solid;
                border-width: 4px;
                top: -8px;
                left: 16px;
            }
            display: none;
            top: 24px;
            width: 510px;
            background-color: #fff;
            position: absolute;
            cursor: auto;
            user-select: text;
            white-space: normal;
            font-size: 12px;
            text-align: left;
            background: #FFF;
            border: 1px solid #E5E5E5;
            border-radius: 4px;
            padding: 19px 15px 9px; 
            span {
                display: inline-block;
                min-width: 120px;
                line-height: 1.5;
                font-weight: 500;
              }
              h3 {
                color: #ccc;
                font-size: 16px;
                margin-bottom: 11px;
              }
        }
        &:hover {
            dd {
              display: block;
              z-index: 999;
            }
          }
    }
}
.m-products-list{
    box-sizing: border-box;
    margin-top: 10px;
    background: #FFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    line-height: 20px;
    padding: 11px 20px;
    >ul{
        li{
            width: 96px;
            height: 20px;
            display: inline-block;
          box-sizing: border-box;
          text-align: center;
          cursor: pointer;
          &.s-nav-active {
            color: #31BCAD;
          }
        }
        padding-bottom: 2px;
    }
}

.s-item{
    display: flex;
    padding: 20px 0px;
    min-height: 125px;
    border-top: 1px solid #e5e5e5;
    font-size: 14px;
    dt{
        width: 220px;
        padding-right: 20px;
        >img{
            width: 220px;
            height: 125px;
            overflow: hidden;
        }
    }
    dd{
        flex: 1;
        >h3{
            font-weight: 500;
            font-size: 16px;
            color: #333;
        }
        .el-rate {
            display: inline-block;
  
            .el-rate__icon {
              font-size: 12px;
            }
          }
          >span {
            font-size: 12px;
            margin-right: 10px;
          }
          .s-item-comment-total {
            color: #f90;
          }
          .s-item-price {
            color: #f60;
          }
          .deal-items{
              .items{
                  cursor: pointer;
                  border-radius: 4px;
                  padding: 6px 0  8px;
                  &:hover {
                    background-color: #F8F8F8;
                    .deal-title {
                      color: #13D1BE;
                    }
                  }
                  .deal-title {
                    font-size: 14px;
                    line-height: 20px;
                  }
                  .deal-price {
                    font-size: 15px;
                    color: #f60;
                    margin-right: 10px;
                  }
                  .deal-old-price {
                    font-size: 12px;
                    color: #999;
                    margin-right: 10px;
                  }
                  .deal-sales {
                    font-size: 12px;
                    color: #999;
                  }      
              }
          }
          >p {
            >span {
              font-size: 12px;
              padding-right: 10px;
            }
  
            >em {
              font-style: normal;
            }
            
        }
        >ul {
            list-style: none;
            font-size: 12px;
            padding-top: 11px;
            margin-top: 5px;
            border-top: 1px dashed #ddd;
  
            li {
              width: 668px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
  
              .detail-type {
                width: 27px;
                height: 15px;
                line-height: 15px;
                display: inline-block;
                background: rgb(35, 147, 238);
                color: #fff;
                text-align: center;
                border-radius: 1px;
                padding: 1px 2px;
                margin-right: 10px;
              }
  
              &:nth-child(2) {
                .detail-type {
                  background: rgb(162, 35, 204);
                }
              }
  
              &:nth-child(3) {
                .detail-type {
                  background: rgb(234, 109, 45);
                }
              }
            }
          }
    }
}

.list-left{
  // border: 1px solid;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 10px;
  h4{
    font-size: 16px;
    color: #333;
  }
  .list{
    width: 100%;
    list-style: none;
    li{
      // border: 1px solid;
      width: 100%;
      // text-align: center;
      // border-radius: 10px;
      margin: 10px 0;
      img{
        width: 100%;
        border-radius: 10px;
      }
      span.pos{
        display: block;
        text-align: left;
        color:#999;
        font-size: 12px;
      }
      span.price_ico{
        font-size: 14px;
        color: #f60;
      }
      span.price_num{
        font-size: 22px;
        color: #f60;
      }
    }
  }
}